<template>
  <a-modal @cancel="close" title="具体原因" width="45vw" :visible="visible" unmount-on-close okText="关闭" @ok="close" hide-cancel>
    <div class="member-msg" v-if="statusInfo">
      <div
        >姓名：<span>{{ statusInfo.memberName || '-' }}</span></div
      >
      <div
        >手机号：<span>{{ statusInfo.phone || '-' }}</span></div
      >
      <div
        >证件类型：<span>{{ statusInfo.cardTypeName || '-' }}</span></div
      >
      <div
        >证件号：<span>{{ statusInfo.cardNumber || '-' }}</span></div
      >
    </div>
    <div class="member-other" v-if="statusInfo">
      <div class="member-msg">
        <div
          >操作类型：<span v-if="statusInfo.operateTypeName == '拉黑'" class="member-h">{{ statusInfo.operateTypeName }}</span>
          <span v-else-if="statusInfo.operateTypeName == '恢复'" class="member-f">{{ statusInfo.operateTypeName }}</span>
          <span v-else>{{ statusInfo.operateTypeName || '-' }}</span></div
        >
        <div
          >操作时间：<span>{{ statusInfo.createTime || '-' }}</span></div
        >
        <div
          >操作人：<span>{{ statusInfo.createUserName || '-' }}</span></div
        >
        <div v-if="statusInfo.operateTypeName != '恢复'"
          >失信类型：<span>{{ statusInfo.blockType || '-' }}</span></div
        >
      </div>
      <div class="reson-remark">
        <div class="tlt">具体原因：</div>
        <div class="reson-remark-text">{{ statusInfo.reason || '-' }}</div>
      </div>
      <div class="reson-imgs" v-if="statusInfo.operateTypeName != '恢复'">
        <div class="tlt">失信凭证：</div>
        <upload-img v-if="fileIdList" v-model="statusInfo.fileIdList" disabled />
      </div>
    </div>
  </a-modal>
</template>

<script setup name="memberStatusRecordModal">
  import { ref } from 'vue'
  import { statusRecordDetail } from '@/api/market/member'
  const visible = ref(false)
  const statusInfo = ref(null)
  const statusId = ref(null)
  const fileIdList = ref(null)

  // 关闭
  const close = () => {
    visible.value = false
  }
  // 打开
  const openModal = (id) => {
    statusInfo.value = null
    visible.value = true
    statusId.value = id
    getDetail(statusId.value)
  }

  // 查看具体原因
  const getDetail = (statusId) => {
    statusRecordDetail({ id: statusId }).then((res) => {
      statusInfo.value = res.result
      fileIdList.value = statusInfo.value.fileIdList
    })
  }

  defineExpose({
    openModal,
  })
</script>
<style lang="less" scoped>
  .member-msg {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    div {
      width: 50%;
      margin-bottom: 16px;
      span {
        font-weight: 400;
      }
    }
  }
  .member-other {
    padding: 20px;
    width: 100%;
    background-color: rgba(247, 248, 250, 0.5);
    .reson-remark,
    .reson-imgs {
      margin-bottom: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .tlt {
        width: 75px;
      }
    }
  }
  span {
    color: var(color-text-1);
  }
  .member-h {
    color: #f53f3f;
  }
  .member-f {
    color: #00b42a;
  }
  .reson-remark-text {
    width: 70%;
    word-wrap: break-word;
  }
</style>
